<template>
    <div  class="hw100">
        <div class="padding20" style="height:calc(100% - 100px)">
            <el-row>
                <!--<el-col :span="6" class="noBg pl15 pr20">-->
                    <!--<div class="flexCenter">-->
                        <!--<div class="font14 whiteColor fontNormal mr20">关键区域名称</div>-->
                        <!--<el-input class="border1 flex1" v-model="search.gjqyMc"-->
                                  <!--@keyup.enter.native="getTableByType"></el-input>-->
                    <!--</div>-->
                <!--</el-col>-->
                <el-col :span="6" class="noBg pl20 pr20">
                    <div class="flexCenter">
                        <div class="font14 whiteColor fontNormal mr20">重要经济目标名称</div>
                        <el-input class="border1 flex1" v-model="search.zyjjmbMc"
                                  @keyup.enter.native="getTableByType"></el-input>
                    </div>
                </el-col>

                <el-col :span="6" class="noBg pl20 pr20">
                    <div class="flexCenter">
                        <div class="font14 whiteColor fontNormal mr20">重要经济目标类型</div>
                        <el-cascader class="border1 flex1" style="height: 35px;" clearable
                                     :props="optionsProps"
                                     v-model="search.categoryID"
                                     :options="options"
                                     @change="handleChange"></el-cascader>
                    </div>
                </el-col>
                <el-col :span="6" class="noBg pl15 ">
                    <div class="flexCenter">
                        <div class="font14 whiteColor fontNormal mr20">目标等级</div>
                        <el-select class="border1 flex1" v-model="search.mbdj" @change="getTableByType" clearable>
                            <el-option label="特级" value="0"></el-option>
                            <el-option label="一级" value="1"></el-option>
                            <el-option label="二级" value="2"></el-option>
                            <el-option label="三级" value="3"></el-option>
                        </el-select>
                    </div>
                </el-col>
            </el-row>
            <div class="mt20 " style="height: 100%;">
                <div class="table" style="height:calc(100% - 100px);overflow-y: auto">
                    <div class="searchTitle">重要经济目标结果</div>
                    <el-table :data="zyjjmbSliceData" border
                              @selection-change="handleSelectionChange"
                              row-key="mbid"
                              style="width: 100%">
                        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
                        <el-table-column type="index" label="序号" width="60"></el-table-column>
                        <!-- <el-table-column prop="rfdwmc" label="人防单位名称" width="180px">
                             <template slot="header">
                                 <div class="titleDiv" style="height: 23px;line-height: 23px;">人防单位名称</div>
                                 <el-cascader
                                         :options="data"
                                         :props="{ checkStrictly: true }"
                                         style="width:50px;height: 23px;position: absolute;top:-8px"
                                         class="noBg"
                                         v-model="value"
                                         @change="elChange"
                                         clearable
                                 ></el-cascader>
                             </template>
                         </el-table-column>-->
                        <el-table-column prop="mbmc" label="目标名称" width="300px"></el-table-column>
                        <el-table-column prop="categorymc" label="目标类别" width="140"></el-table-column>
                        <el-table-column prop="mbdjMc" label="目标级别" width="120"></el-table-column>
                        <el-table-column prop="dz" label="地址" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="jd" label="经度">
                              <template slot-scope="scope">
                                  {{toHdMSJd(scope.row.jd)}}
                              </template>
                            </el-table-column>
                            <el-table-column prop="wd" label="纬度">
                              <template slot-scope="scope">
                                  {{toHdMSWd(scope.row.wd)}}
                              </template>
                            </el-table-column>
                        <el-table-column prop="mbdwmc" label="目标单位"></el-table-column>
                        <el-table-column prop label="操作" width="100">
                            <template slot-scope="scope">

                <span
                        @click.prevent="updataZyjjmb( scope.row)"
                        class="normalColor mr10 cursor"
                ><img src="../../assets/image/sjlr/编辑_on.png" title="编辑" v-if="!isNopower()"/>
                                    <span v-if="isNopower()"  class="normalColor  cursor">查看</span></span>
                                <span
                                        @click.prevent="DelectRow2(scope.row,'zyjjmb')" v-if="!isNopower()"
                                        class="normalColor mr10 cursor"
                                ><img src="../../assets/image/sjlr/删除_on.png" title="编辑"/></span>
                            </template>
                        </el-table-column>
                    </el-table>
              <!--      <div class="searchTitle">关键区域结果</div>
                    <el-table :data="gjqySliceData"
                            border
                            highlight-current-row
                            ref="multipleTable"
                            style="width: 100%"
                            row-key="gjqyid"
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
                        <el-table-column prop="gjqymc" label="关键区域名称"></el-table-column>
                        <el-table-column prop="lbmc" label="关键区域类别"></el-table-column>
                        &lt;!&ndash;          <el-table-column prop="account" label="目标类别"></el-table-column>&ndash;&gt;
                        &lt;!&ndash;          <el-table-column prop="mbjb" label="目标级别"></el-table-column>&ndash;&gt;
                        <el-table-column prop="dz" label="地址"></el-table-column>
                        <el-table-column prop="ssbm" label="所属部门"></el-table-column>
                        <el-table-column prop="hsdjmc" label="毁伤等级"></el-table-column>
                        <el-table-column prop="fhdjmc" label="防护等级"></el-table-column>
                        <el-table-column prop="zbsdh" label="值班室电话"></el-table-column>
                        <el-table-column prop label="操作" width="120">
                            <template slot-scope="scope">
              <span @click="editDmt(scope.row)" class="cursor">
                <img src="../../assets/images/dmtIcon.png" title="多媒体信息"/>
              </span>
                                <span @click="editGjqy(scope.row)" class="cursor ml10 mr10" >

                <img src="../../assets/image/sjlr/编辑_on.png" title="编辑" v-if="!isNopower()"/>
                                    <span v-if="isNopower()">查看</span>
              </span>
                                <span
                                        @click.prevent="DelectRow2(scope.row)" class="normalColor cursor" v-if="!isNopower()">
                <img src="../../assets/image/sjlr/删除_on.png" title="删除"/>
              </span>
                            </template>
                        </el-table-column>
                    </el-table>-->

                </div>
                <div class="page mt20">
                    <pages :page="page" @changePage="changePage"></pages>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
  import { baseServe } from "../../request/api";
  import pages from "../base/pages";

  export default {
    data() {
      return {
        value:[],
        search: {
          zyjjmbMc: "",
          gjqyMc: "",
          categoryID: "",
          mbdj: ""
        },
        options: [],
        optionsProps: {
          checkStrictly: true,
          value: "categoryId",
          label: "categoryName",
          children: "catagoryInfos"
        },
        page: {
          total: 0,
          limit: 10,
          currentPage: 1,
          pageSizes: [5, 10]
        },
        gjqySliceData: [],
        zyjjmbSliceData: [],
        selectRowArr: [],
        zyjjmbArr: [],
        gjqyArr: [],
        categoryIDs:[]
      };
    },
    computed: {},
    mounted() {
      this.getCategoryTree();
      this.getTableByType();
    },
    methods: {
      checkChildrenArr(arr){
          arr.map(v => {
            if (v.catagoryInfos&&v.catagoryInfos.length>0) {
              v.catagoryInfos=this.checkChildrenArr(v.catagoryInfos);
            }else{
              delete  v.catagoryInfos
            }
          });
          return arr
      },
      //递归获取子集 id集合
      getChildren(data, mbArr) {
        if (data.categoryId) {
          mbArr.push(data.categoryId);
        }
        if (data.catagoryInfos&&data.catagoryInfos.length>0) {
          data.catagoryInfos.map(v => {
            mbArr.concat(this.getChildren(v, mbArr));
          });
        }
        return mbArr;
      },
      //递归获取选中项子集
      getChildrenList(val,list){
        let obj={}
        if(list&&list.length>0){
        for (let k in  list){
            if(list[k].categoryId==val){
              return  obj=list[k]
            }else{
              if(list[k].catagoryInfos && list[k].catagoryInfos.length>0){
                if(this.getChildrenList(val,list[k].catagoryInfos).categoryId){
                  return  obj =  this.getChildrenList(val,list[k].catagoryInfos)
                }
              }
            }
          }
        }
        return obj
      },
      //联动触发事件
      elChange() {
        this.$store.state.TreeRfdwnm = this.value[this.value.length - 1];
        localStorage.setItem("TreeRfdwnmBmy", this.value[this.value.length - 1]);
        this.TreeDataList();
      },
      handleChange(value) {
        this.categoryIDs=this.getChildren(this.getChildrenList(value[value.length-1],this.options),[])
       this.getTableByType()

      },
      //表格数据多选
      handleSelectionChange(val) {
        this.selectRowArr = [];
        val.forEach(item => {
          this.selectRowArr.push(item.id);
        });
      },
      getCategoryTree() {
        baseServe.getDetail({}).then(res => {
          if (res.data.categoryInfos) {
            this.options =this.checkChildrenArr(res.data.categoryInfos) ;
          }
        });
      },
      //获取表格
      getTableByType() {
        this.$store.state.loadingFlag=true
        let param=JSON.parse(JSON.stringify(this.search))
        param.categoryIDs =this.categoryIDs||'' ;
        baseServe
          .searchData(param)
          .then(res => {
            this.$store.state.loadingFlag=false
            if (res.data.gjqyModels||res.data.gjqyModels) {
              this.gjqyArr = res.data.gjqyModels;
              this.zyjjmbArr = res.data.zyjjmbModels;
              this.page.total = this.zyjjmbArr.length ;
              this.page.currentPage = 1;
              this.pages();
            }
          });
      },
      //前台分页
      pages() {
        this.page.total = this.zyjjmbArr.length ;
        if (!this.page.total % this.page.limit) {
          this.page.currentPage = this.page.currentPage - 1;
        }
        let begin = (this.page.currentPage - 1) * this.page.limit;
        let end = this.page.currentPage * this.page.limit;
        // this.zyjjmbModels gjqyModels
        this.zyjjmbSliceData = this.zyjjmbArr.slice(begin, end);
        this.gjqySliceData = this.gjqyArr.slice(begin, end);
      },
      changePage(data) {
        this.page = data;
        this.pages();
      },
      //编辑页面
      updataZyjjmb(row) {
        this.$router.push({path:"/sjwh/sjsl/jbxx",name:'jbxx',params:{row:row,type:'zyjjmb'}});
      },
      editGjqy(row) {
        this.$router.push({path:"/sjwh/sjsl/gjqy",name:'gjqy',params:{row:row,type:'gjqy'}});
      },
      editDmt(row) {
        this.$router.push({path:"/sjwh/sjsl/gjqy",name:'gjqy',params:{row:row,type:'gjqyDmt'}});
      },
      //删除数据
      DelectRow2(row,type) {
        this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            if(type=='zyjjmb'){
              let params = {
                zyjjmbID: row.mbid
              };
              baseServe.getDelectList(params).then(res => {
                if (res.status == 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                  this.getTableByType();
                }
              });
            }else{
              baseServe.deleteGJQY({ gjqyID: row.gjqyid }).then(() => {
                this.getTableByType();
                this.$message({ type: "success", message: "删除成功" });
              });
            }


          })
      }
    },
    components: {
      pages
    }
  };
</script>


<style scoped lang="less">
.searchTitle{
    height: 30px;
    font-weight: 700;
    font-size: 20px;
    display: block;
    padding: 10px;
    color: #00ffff;
}
</style>
